<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        readyState:
        <p>0 unsent 代理被创建，单尚未调用open（）</p>
        <p>1 opened open()方法已经被调用</p>
        <p>2 headers_received send()方法已经被调用，并且头部和状态已经可获得</p>
        <p>3 loading 下载中；responseText属性已经包含部分数据</p>
        <p>4 done 下载操作已完成</p>

    </div>
    <script>
        const getJson = function(url){
            const promise = new Promise((resolve,reject)=>{

                const handler = function(){
                    console.log(this.readyState,this.status)
                    if(this.readyState !==4 ){//2,3,4
                        return;
                    }
                    if(this.status === 200){
                        resolve(this.response)
                    }else{
                        reject(new Error(this.statusText))
                    }
                }
                

                const client = new XMLHttpRequest();
                client.open("GET",url);//初始化
                client.onreadystatechange = handler
                client.responseType="json"
                client.setRequestHeader("Accept","application/json");//Accept 属性默认值*/*
                client.send();//发送
            })
            return promise
        };
        getJson('https://yuer.xunkids.com/api/v1/home/banners').then((res)=>{
            console.log(res)
        },err=>{
            console.error(err)
        })
    </script>
</body>
</html>